<style>
  body {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 720px;
    background: url(images/index-bg.png);
    background-color: transparent;
  }

  #main-0-0 {
    position: absolute;
    left: 45px;
    top: 140px;
    width: 484px;
    height: 306px;
  }


  #main-1 {
    position: absolute;
    left: 45px;
    top: 467px;
  }

  #main-1 .item {
    position: absolute;
    width: 148px;
    height: 148px;
  }

  #main-1-0 {
    left: 0;
  }

  #main-1-1 {
    left: 168px;
  }

  #main-1-2 {
    left: 336px;
  }

  #main-2 {
    position: absolute;
    left: 549px;
    top: 140px;
  }

  #main-2 img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
  }

  #main-2 .item {
    position: absolute;
    background: url(images/loading-placeholder.png) repeat;
  }

  #main-2-0 {
    top: 0;
    width: 227px;
    height: 306px;
  }

  #main-2-1 {
    left: 247px;
    top: 0;
    width: 435px;
    height: 200px;
  }

  #main-2-2 {
    left: 0;
    top: 326px;
    width: 227px;
    height: 148px;
  }

  #main-2-3 {
    left: 247px;
    top: 220px;
    width: 208px;
    height: 257px;
  }

  #main-2-4 {
    top: 220px;
    left: 475px;
    width: 208px;
    height: 257px;
  }

  #message {
    position: absolute;
    left: 35px;
    top: 640px;
  }

  #message .icon {
    position: absolute;
    left: 50px;
    top: 5px;
  }

  #message-view {
    position: absolute;
    left: 120px;
    width: 1000px;
    padding: 0 24px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    background: url(images/page0-main3-1.png);
    color: #fff;
    overflow: hidden;
  }

  #message-container {
    position: relative;
  }

  #dialog {
    position: absolute;
    z-index: 1000;
    height: 720px;
    width: 1280px;
  }

  #look {
    font-size: 12px;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 5px;
  }

  #dialog .item {
    position: absolute;
    display: none;
  }

  #dialog .item.show {
    display: block;
  }

  #dialog-0 {
    left: 907px;
    top: 77px;
  }

  #dialog-1 {
    left: 491px;
    top: 557px;
  }
</style>

<div id="main-0-0" class="item item-focus">
  <div id="look"></div>
</div>
<div id="main-1">
  <div id="main-1-0" class="item item-focus">
    <img src="images/page0-main1-0.png" alt="">
  </div>
  <div id="main-1-1" class="item item-focus">
    <img src="images/page0-main1-1.png" alt="">
  </div>
  <div id="main-1-2" class="item item-focus">
    <img src="images/page0-main1-2.png" alt="">
  </div>
</div>
<div id="main-2">
  <div id="main-2-0" class="item item-focus"></div>
  <div id="main-2-1" class="item item-focus"></div>
  <div id="main-2-2" class="item item-focus"></div>
  <div id="main-2-3" class="item item-focus"></div>
  <div id="main-2-4" class="item item-focus"></div>
</div>
<div id="dialog" style="display: none;">
  <img id="dialog-0" class="item" src="images/close.png" alt="">
  <img id="dialog-1" class="item" src="images/order.png" alt="">
</div>
<div id="message">
  <img class="icon" src="images/page0-main3-0.png" alt="">
  <div id="message-view">
    <div id="message-container"></div>
  </div>
  <!-- <div class="item">熊猫专区免费上线啦！敬请收看！</div> -->
</div>


<script>
  var messageIndex = 0;
  var videosIndex = 0;
  var videos = [];
  // showTest(getDomain().domain)
  // domain = null // getDomain().domain;
  var mp = null;

  function _init() {
    domain = getDomain().domain || null;
    messageTimer = null;
    renderDialog();
    initMediaPlay();
    renderMessage();
    renderSubject();
    getVideos();
    onFocus();
    getLog({
      programId: TYPEIDS.MAIN1,
      programName: '精彩推荐',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
  }

  function renderDialog() {
    var data = getTypeListByTypeId({
      TYPEID: '1284087959661842433'
    }).TYPEs;
    bg = '';
    if (data[2].typeId == '1284128359701286913') {
      bg = data[2].typePicture[0].picPath3;
      $('#dialog').css('background-image', 'url(' + bg + ')');
    }
    if (bg && visible && first) {
      $('#dialog').css('display', 'block');
      $('#dialog-1').addClass('show');
      first = false;
    } else {
      visible = false;
    }
  }

  function getVideos() {
    var typeid = TYPEIDS.VIDEOS
    var total = getVodListByTypeId({
      TYPEID: typeid,
      LENGTH: 1,
      STATION: 1
    }).total
    var station = Math.floor(Math.random() * total);
    var vodid = getVodListByTypeId({
      TYPEID: typeid,
      LENGTH: 1,
      STATION: station
    }).data[0].ID;
    sitcom = getVodDetailInfo({
      VODID: vodid
    })
    if (isSub == 1 || isSub == 5 || isSub == 98) {
      for (var i = 0, l = sitcom.sitcomList.length; i < l; i++) {
        if (sitcom.sitcomList[i].charge == 0) {
          videos.push(sitcom.sitcomList[i])
        }
      }
      $('#look').html('您没有订购当前节目，可以免费观看前' + videos.length + '集');
    } else {
      videos = sitcom.sitcomList;
      $('#look').html('')
    }
    // getFilmDate(sitcom, sitcom.code);
    getPlayUrl(videos[videosIndex].code)
  }


  // 此处鉴权视频窗口是否播放
  // function getFilmDate(sitcom) {
  //   filmDate = playFilmData({
  //     mediaCode: '27b13558e38349168a72855abe6cfb85'
  //   })

  //   isSub = filmDate.forwardJson.isSub;
  //   visible = isSub == 0 ? false : true;
  //   if (isSub == 1 || isSub == 5 || isSub == 98) {
  //     for (var i = 0, l = sitcom.sitcomList.length; i < l; i++) {
  //       if (sitcom.sitcomList[i].charge == 0) {
  //         videos.push(sitcom.sitcomList[i])
  //       }
  //     }
  //     $('#look').html('您没有订购当前节目，可以免费观看前' + videos.length + '集');
  //   } else {
  //     videos = sitcom.sitcomList;
  //     $('#look').html('')
  //   }

  //   if (bg && visible && first) {
  //     $('#dialog').css('display', 'block');
  //     $('#dialog-1').addClass('show');
  //     first = false;
  //   } else {
  //     visible = false;
  //   }
  // }

  function goUtility() {
    clearTimer();
    videosIndex++;
    videosIndex = videosIndex % videos.length;
    getPlayUrl(videos[videosIndex].code)
  }

  function renderSubject() {
    subjects = getTypeListByTypeId({
      TYPEID: TYPEIDS.MAIN1
    }).TYPEs
    for (var i = 0; i < subjects.length; i++) {
      $('#main-2-' + i).html('<img src="' + subjects[i].typePicture[0].picPath2 + '"/>')
    }
  }

  function renderMessage() {
    var html = '';
    var message = getTypeListByTypeId({
      TYPEID: TYPEIDS.MESSAGE
    }).TYPEs
    for (var i = 0, l = message.length; i < l; i++) {
      html += '<div class="item">' + message[i].typeIntroduce + '</div>'
    }
    $('#message-container').html(html);

    if (message.length > 1) {
      messageTimer = setInterval(function () {
        $('#message-container').css('top', -(++messageIndex % message.length) * 44);
      }, 1000 * 5)
    }
  }


  _init()

  function keyUp() {
    if (loading) return;
    var index = area[focusArea].index;
    if (!visible) {
      freeFocus()
      switch (focusArea) {
        case 2:
          focusArea = 0;
          break;
        case 3:
          focusArea = 2;
          break;
        case 4:
          if (index == 0) {
            focusArea = 0
          } else if (index == 1) {
            focusArea = 1;
          } else if (index == 2) {
            area[focusArea].index = 0;
          } else if (index == 3) {
            area[focusArea].index = 1;
          } else if (index == 4) {
            area[focusArea].index = 1;
          }
          break;
      }
      onFocus();
    } else {
      if (orderIndex == 1) {
        orderIndex = 0;
        $('#dialog .item').eq(orderIndex).addClass('show').siblings('.item').removeClass('show');
      }
    }

  }

  function keyDown() {
    if (loading) return;
    var index = area[focusArea].index;
    if (!visible) {
      freeFocus()
      switch (focusArea) {
        case 0:
          focusArea = 2;
          break;
        case 1:
          focusArea = 4;
          area[focusArea].index = 1;
          break;
        case 2:
          focusArea = 3;
          area[focusArea].index = 1;
          break;
        case 4:
          if (index == 0) {
            area[focusArea].index = 2;
          } else if (index == 1) {
            area[focusArea].index = 3;
          }
          break;
      }
      onFocus();
    } else {
      if (orderIndex == 0) {
        orderIndex = 1;
        $('#dialog .item').eq(orderIndex).addClass('show').siblings('.item').removeClass('show');
      }
    }
  }

  function keyLeft() {
    if (loading) return;
    var index = area[focusArea].index;

    if (!visible) {
      freeFocus();
      switch (focusArea) {
        case 0:
          break;
        case 1:
          if (index > 0) {
            area[focusArea].index--;
          } else {
            focusArea = 0;
            renderMain($('#nav .nav-item').length - 1)
          }
          break;
        case 2:
          break;
        case 3:
          if (index != 0) {
            area[focusArea].index--;
          }
          break;
        case 4:
          if (index == 0) {
            focusArea = 2;
          } else if (index == 2) {
            focusArea = 3;
            area[focusArea].index = 2;
          } else {
            area[focusArea].index--;
          }
          break;
      }
      onFocus();
    }

  }

  function keyRight() {
    if (loading) return;
    var index = area[focusArea].index;
    if (!visible) {
      freeFocus();
      switch (focusArea) {
        case 0:
          clearInterval(messageTimer);
          clearTimer();
          if (mp) {
            destroy()
          }
          renderMain(1)
          break;
        case 1:
          index++;
          if ($('#' + area[focusArea].id + index).length > 0) {
            area[focusArea].index++;
          }
          break;
        case 2:
          focusArea = 4;
          area[focusArea].index = 0;
          break;
        case 3:
          index++;
          if ($('#' + area[focusArea].id + index).length > 0) {
            area[focusArea].index++;
          } else {
            focusArea = 4;
            area[focusArea].index = 2;
          }
          break;
        case 4:
          if (index != 1 && index != 4) {
            area[focusArea].index++;
          }
          break;
      }
      onFocus();
    } else {

    }

  }

  function keyEnter() {
    if (loading) return;
    var index = area[focusArea].index;
    var form = PANDA_PATH + "index.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&HEADER=' + area[0]
      .index;
    if (!visible) {
      switch (focusArea) {
        case 1:
          if (index == 0) {
            GY.addUrl(PANDA_PATH + 'search.html', form);
          } else if (index == 1) {
            GY.addUrl(PANDA_PATH + 'favorite.html', form);
          } else if (index == 2) {
            GY.addUrl(PANDA_PATH + 'history.html', form);
          }
          break;
        case 2:
          programGoUrl(sitcom, form);
          break;
        case 3:
          GY.addUrl(PANDA_PATH + 'new-link-all.html?TYPEID_INDEX=' + index, form);
          break;
        case 4:
          var _sitcom = getVodListByTypeId({
            TYPEID: subjects[index].typeId
          }).data[0];
          programGoUrl(_sitcom, form);
          break;
      }
    } else {
      if (orderIndex == 1) {
        // programGoUrl(sitcom, form);
        order({
          mediaCode: '27b13558e38349168a72855abe6cfb85',
          ProductID: '20060520084752000001',
          ReturnURL: escape(form + '&IS_ORDER=1&ORDER_ID=0&PRO_ID=20060520084752000001'),
          backUrl: escape(form + '&IS_ORDER=1&ORDER_ID=0&PRO_ID=20060520084752000001')
        })
      } else if (orderIndex == 0) {
        $('#dialog').css('display', 'none');
        visible = false;
      }
    }
  }


  function initMediaPlay(vodPlayUrl) {
    destroy()
    try {
      mp = new MediaPlayer();
    } catch (err) {
      // console.log(err)
      return;
    }
    var instanceId = mp.getNativePlayerInstanceID();
    var playListFlag = 0;
    var videoDisplayMode = 0;
    var height = 312;
    var width = 488;
    var left = 44;
    var top = 138;
    var muteFlag = 0;
    var useNativeUIFlag = 1;
    var subtitleFlag = 0;
    var videoAlpha = 0;
    var cycleFlag = 0;
    var randomFlag = 0;
    var autoDelFlag = 0;
    var mediaStr = '[{mediaUrl:"' + vodPlayUrl + '",' +
      'mediaCode: "jsoncode1",' +
      'mediaType:2,' +
      'audioType:1,' +
      'videoType:1,' +
      'streamType:1,' +
      'drmType:1,' +
      'fingerPrint:0,' +
      'copyProtection:1,' +
      'allowTrickmode:1,' +
      'startTime:0,' +
      'endTime:20000,' +
      'entryID:"jsonentry1"}]';
    mp.initMediaPlayer(instanceId, playListFlag, videoDisplayMode, height, width, left, top, muteFlag, useNativeUIFlag,
      subtitleFlag, videoAlpha, cycleFlag, randomFlag, autoDelFlag);

    mp.setSingleMedia(mediaStr); //设置媒体播放器播放媒体内容
    mp.setAllowTrickmodeFlag(0); //设置是否允许trick操作。 0:允许 1：不允许
    mp.setNativeUIFlag(0); //播放器是否显示缺省的Native UI，  0:允许 1：不允许
    mp.setAudioTrackUIFlag(1); //设置音轨的本地UI显示标志 0:不允许 1：允许
    mp.setMuteUIFlag(1); //设置静音的本地UI显示标志 0:不允许 1：允许
    mp.setAudioVolumeUIFlag(1); //设置音量调节本地UI的显示标志 0:不允许 1：允许
    mp.setCycleFlag(1); //这句神奇的代码用于解决电视剧连续播放的问题
    mp.refreshVideoDisplay();
  }

  function destroy() {
    if (!mp) return
    var nativePlayerInstanceID = mp.getNativePlayerInstanceID();
    mp.stop();
    mp.releaseMediaPlayer(nativePlayerInstanceID)
  }

  function getPlayUrl(mediaCode) {
    var url = domain + '/datajsp/play_getVodPlayUrl.jsp?mediaCode=' + mediaCode;
    $.get(url, function (data) {
      var data = eval('(' + data + ')');
      if (data.playUrl) {
        initMediaPlay(data.playUrl);
        play()
      }
    })
  }

  function play() {

    mp.playByTime(1, 0);
    // if (videos[videosIndex].charge == 0) {
    //   mp.playByTime(1, 0);
    //   $('#look').html('');
    // } else {
    //   if (isSub == 1 || isSub == 5 || isSub == 98) {
    //     mp.playByTime(1, 15);
    //     showLook();
    //   } else {
    //     mp.playByTime(1, 0);
    //     $('#look').html('');
    //   }
    // }
  }

  function showLook() {
    $('#look').html('此视频是付费节目,可免费观看' + lookTime + '秒');
    lookTimer = setInterval(function () {
      lookTime--;
      if (lookTime <= 0) {
        clearTimer()
        videosIndex++
        videosIndex = videosIndex % videos.length;
        getPlayUrl(videos[videosIndex].code)
      }
      $('#look').html('此视频是付费节目,可免费观看' + lookTime + '秒');
    }, 1000)
  }

  function clearTimer() {
    lookTime = 15;
    clearInterval(lookTimer);
  }
</script>